<template>
  <div class="box">
      <header class="header">
        <van-nav-bar title="确认订单" left-arrow @click-left="back"/>
      </header>
      <section class="content">
        <van-cell v-if="flag" :title="name + '' +tel" center :label="address" is-link @click="changeAddress"/>
        <van-cell v-else title="添加收货地址" center @click="changeAddress" icon="location-o" is-link/>
        <div class="bottom"></div>
        <van-card v-for="item of orderlist" :key="item.orderid" :num="item.num" :price="item.price" :title="item.proname" :thumb="item.proimg"/>
        <van-submit-bar :price="totalPrice" :disabled="!flag" button-text="去支付" @submit="pay" />
      </section>
    </div>
</template>

<script>
import Vue from 'vue'
import { NavBar, Cell, Card, SubmitBar, Dialog } from 'vant'
import { confirmOrderInfo, getDefaultAddress, updateDefaultAddress, deleteCartData, pay } from '@/api/order'

Vue.use(NavBar)
Vue.use(Cell)
Vue.use(Card)
Vue.use(SubmitBar)

Vue.use(Dialog)

export default {
  data () {
    return {
      flag: true,
      orderlist: [],
      name: '',
      tel: '',
      address: '',
      defaultData: [] // 默认收获人信息
    }
  },
  mounted () {
    confirmOrderInfo({
      userid: localStorage.getItem('userid'),
      time: this.$route.params.time
    }).then(res => {
      // console.log(res)
      this.orderlist = res.data.data
      if (this.orderlist[0].tel !== '') {
        // 有订单的地址
        this.name = this.orderlist[0].name
        this.tel = this.orderlist[0].tel
        this.address = this.orderlist[0].address
        this.flag = true
      } else {
        // 没有订单的地址,请求默认的地址，如果有显示默认地址，如果没有，显示添加地址
        getDefaultAddress({
          userid: localStorage.getItem('userid')
        }).then(res => {
          // console.log(res)
          if (res.data.data.length === 0) {
            // 没有默认地址
            this.flag = false
          } else {
            // console.log(res)
            const address = res.data.data[0].province === res.data.data[0].city ? res.data.data[0].province + res.data.data[0].county + res.data.data[0].addressDetail : res.data.data[0].province + res.data.data[0].city + res.data.data[0].county + res.data.data[0].addressDetail
            this.flag = true
            this.defaultData = res.data.data
            this.name = res.data.data[0].name
            this.tel = res.data.data[0].tel
            this.address = address
          }
        })
      }
    })
  },
  methods: {
    back () {
      Dialog.confirm({
        message: '便宜不等人，请三思而行',
        theme: 'round'
      })
        .then(() => {
          // on confirm
          this.$router.back()
        })
        .catch(() => {
          // on cancel
        })
    },
    pay () {
      // console.log('去支付')
      // 判断有没有订单地址，没有，同步默认地址
      if (this.orderlist[0].tel === '') {
        // 同步默认地址，删除购物车数据，跳转到支付页面
        const address = this.defaultData[0].province === this.defaultData[0].city ? this.defaultData[0].province + this.defaultData[0].county + this.defaultData[0].addressDetail : this.defaultData[0].province + this.defaultData[0].city + this.defaultData[0].county + this.defaultData[0].addressDetail
        const { name, tel } = this.defaultData[0]
        // 同步默认地址到订单地址
        updateDefaultAddress({
          userid: localStorage.getItem('userid'),
          time: this.$route.params.time,
          name,
          tel,
          address
        }).then(res => {
          // 删除购物车的数据，跳转到支付页面
          this.deleteData()
        })
      } else {
        // 有订单地址，删除购物车数据，跳转到支付页面
        this.deleteData()
      }
    },
    deleteData () {
      // console.log(333)
      deleteCartData({
        userid: localStorage.getItem('userid')
      }).then(res => {
        // console.log(res)
        // 跳转至支付页面
        // this.$router.replace('/pay?body=' + this.orderlist.length + '件商品&total_fee=' + this.totalPrice + '&out_trade_no=' + this.$route.params.time)
        pay({
          body: this.orderlist.length + '件商品',
          total_fee: this.totalPrice,
          out_trade_no: this.$route.params.time
        }).then(res => {
          // console.log('res', res)
          localStorage.setItem('url', res.data.url)
          this.$router.replace('/pay')
        })
      })
    },
    changeAddress () {
      this.$router.push('/orderaddresslist/' + this.$route.params.time)
    }
  },
  computed: {
    totalPrice () {
      return this.orderlist.reduce((sum, item) => {
        return sum + item.price * item.num
      }, 0) * 100
    }
  }
}
</script>

<style lang="scss" scoped>
.bottom {
  width: 100%;
  height: 5px;
  background: url('') center repeat-x;
}
</style>
